<template>
    <div>
        <M_header title="components"/>

        <div class="content-row">
            <div class="content-list" v-for="lists in Lists">
                <router-link :to="lists.urls">
                    <div class="content-list-title">{{ lists.title }}</div>
                    <div class="iconfont icon-jiantou"></div>
                </router-link>
            </div>
            <M_transition>
                <router-view />
            </M_transition>
        </div>
    </div>
</template>

<script>
    import M_header from "@/components/m-header/m-header.vue";
    import M_transition from "@/components/m-transition/m-transition.vue";
    export default {
        name: "components",
        components: {
            M_transition,
            M_header,
        },
        data () {
            return {
                Lists:[
                    {id:0,title:'弹出选择',urls:'/components/popup_selection'},
                    {id:1,title:'title2',urls:'/components/title2'},
                    {id:2,title:'title3',urls:'/components/title3'},
                    {id:3,title:'title4',urls:'/components/title4'},
                    {id:4,title:'title5',urls:'/components/title4'},
                    {id:5,title:'title6',urls:'/components/title4'},
                    {id:6,title:'title7',urls:'/components/title4'},
                    {id:7,title:'title8',urls:'/components/title4'},
                    {id:8,title:'title9',urls:'/components/title4'},
                    {id:9,title:'title10',urls:'/components/title4'},
                    {id:10,title:'title11',urls:'/components/title4'},
                    {id:11,title:'title12',urls:'/components/title4'},
                    {id:12,title:'title13',urls:'/components/title4'},
                    {id:13,title:'title14',urls:'/components/title4'},
                    {id:14,title:'title15',urls:'/components/title4'},
                    {id:15,title:'title16',urls:'/components/title4'},
                    {id:16,title:'title17',urls:'/components/title4'},
                    {id:17,title:'title18',urls:'/components/title4'},
                    {id:18,title:'title19',urls:'/components/title4'},
                    {id:19,title:'title20',urls:'/components/title4'},
                    {id:20,title:'title21',urls:'/components/title4'},
                    ]
            }
        }
    }
</script>

<style scoped lang="scss">

</style>